import { ref, onMounted, onUnmounted } from 'vue'

interface Scale {
  width: string
  height: string
}

export default function useScreenScale() {
  // 指向最外层容器
  const appRef = ref<HTMLElement | null>(null)
  // 定时函数
  const timer = ref<number>(0)
  // 默认缩放值
  const scale = ref<Scale>({
    width: '1',
    height: '1',
  })

  // 设计稿尺寸（px）
  const baseWidth = 2400
  const baseHeight = 1130

  // 计算缩放比例 - 分段处理
  const calcRate = (): void => {
    if (!appRef.value) return

    // 计算当前屏幕与设计稿的宽高比
    const screenRatio = window.innerWidth / window.innerHeight
    const designRatio = baseWidth / baseHeight

    let scaleValue: number

    if (screenRatio > designRatio) {
      // 屏幕更宽，以高度为基准
      scaleValue = window.innerHeight / baseHeight
    } else {
      // 屏幕更高，以宽度为基准
      scaleValue = window.innerWidth / baseWidth
    }

    // 应用缩放
    scale.value.width = scaleValue.toFixed(5)
    scale.value.height = scaleValue.toFixed(5)
    
    appRef.value.style.transform = `scale(${scale.value.width}) translate(-50%, -50%)`
  }

  // 防抖处理
  const resize = (): void => {
    clearTimeout(timer.value)
    timer.value = window.setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 初始化
  onMounted(() => {
    calcRate()
    window.addEventListener('resize', resize)
  })

  // 清理
  onUnmounted(() => {
    window.removeEventListener('resize', resize)
    clearTimeout(timer.value)
  })

  return {
    appRef,
    scale,
    calcRate
  }
} 